.date-picker-input() {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    padding: @input-padding-vertical-base @input-padding-horizontal-base;
    color: @input-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
    background-color: @input-bg;
    background-image: none;
    border: @border-width-base @border-style-base @input-border-color;
    border-radius: @border-radius-base;
    min-height: 31px;
    transition: all .3s ease-in-out;
    .placeholder(); // Reset placeholder

    &:hover {
        border-color: @input-hover-border-color;
    }

    &:focus,
    &-focused {
        outline: 0;
        border-color: @input-hover-border-color;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    }

    &[disabled] {
        .input-disabled();
    }

    // Reset height for `textarea`s
    textarea& {
        max-width: 100%; // prevent textearea resize from coming out of its container
        height: auto;
        min-height: @input-height-base;
        line-height: @line-height-base;
        vertical-align: bottom;
        transition: all 0.3s, height 0s;
    }
}

.date-picker-input-label() {
    color: @input-placeholder-color;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 10px;
    transition: all .2s linear;
}

.date-picker-input-label-active() {
    top: -7px;
    transform: scale(0.9);
    color: @input-hover-border-color;
    font-weight: 500;
}

.date-picker-label-placeholder() {
    &::placeholder {
        visibility: hidden;
    }

    &:focus,
    &-focused {
        &::placeholder {
            visibility: visible;
        }
    }
}

.date-picker-input-icon() {
    padding: 5px 6px;
    font-size: 18px;
    text-align: center;
    position: absolute;
    bottom: 0;
    z-index: 3;
}

.date-picker-input-hover(@color: @input-hover-border-color) {
    border-color: @color;
    border-right-width: @border-width-base  !important;
}

.date-picker-input-disabled() {
    color: fade(#000, 25%);
    background-color: tint(@input-disabled-bg, 30%);
    cursor: not-allowed;
    opacity: 1;

    &:hover {
        .date-picker-input-hover(@input-border-color);
    }
}

.date-picker-placeholder(@color: @input-placeholder-color) {

    // Firefox
    &::-moz-placeholder {
        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
    }

    &::placeholder {
        color: @color;
        transition: visibility .1s linear;
    }

    &:placeholder-shown {
        text-overflow: ellipsis;
    }
}

.date-picker-word-count {
    color: #808695;
    font-size: 12px;
    position: absolute;
    right: 7px;
    bottom: -16px;
    z-index: 1;
}